<template>
	<div style="height:100%;width: 100%;display: flex;">
			<div style="height:800px;width:20%;background-color: #fff;">
		<el-row class="tac">
			    <el-col >
			      <h3 class="mb-2">后台管理</h3>
			      <el-menu
			        default-active="2"
			        class="el-menu-vertical-demo"
			        @open="handleOpen"
			        @close="handleClose"
			      >
			        <el-sub-menu index="1">
			          <template #title>
			            <el-icon><Avatar /></el-icon>
			            <span>用户管理</span>
			          </template>
			            <router-link to="/adm/sller">
							<el-menu-item index="1-1">买家用户</el-menu-item>
						</router-link>
			        </el-sub-menu>
					<el-sub-menu index="2">
					  <template #title>
					    <el-icon><SoldOut /></el-icon>
					    <span>订单管理</span>
					  </template>
					  <router-link to="/adm/order">
					    <el-menu-item index="2-1">订单详情</el-menu-item>
						</router-link>
					</el-sub-menu>
			        <el-sub-menu index="3">
			          <template #title>
			            <el-icon><Handbag /></el-icon>
			            <span>商品管理</span>
			          </template>
					  <router-link to="/adm/Goods">
						<el-menu-item index="3-1">商品列表</el-menu-item>  
					  </router-link>
			            
			        </el-sub-menu>
					<el-sub-menu index="4">
					  <template #title>
					    <el-icon><Expand /></el-icon>
					    <span>类型管理</span>
					  </template>
					  <router-link to="/adm/onetype">
						 <el-menu-item index="4-1">一级类型</el-menu-item>  
					  </router-link>
					   <router-link to="/adm/twotype">
						<el-menu-item index="4-2">二级类型</el-menu-item>   
					   </router-link>
					</el-sub-menu>
					<el-sub-menu index="5">
					  <template #title>
					    <el-icon><Handbag /></el-icon>
					    <span>轮播图管理</span>
					  </template>
					  <router-link to="/adm/carousel">
						<el-menu-item index="5-1">轮播图</el-menu-item>  
					  </router-link>
					    
					</el-sub-menu>
			      </el-menu>
			    </el-col>
			  </el-row>	
		</div>
			 <div style="width: 80%; height:800px; background-color: #FFFFFF;">
			<router-view></router-view>
			 </div>
	</div>
</template>

<script lang="ts" setup>
	import { ref,reactive,onMounted } from 'vue'
	import router from "../../router/index.js"
	import {Document,Menu as IconMenu,Location,Setting,} from '@element-plus/icons-vue'
	const handleOpen = (key: string, keyPath: string[]) => {
	  console.log(key, keyPath)
	}
	const handleClose = (key: string, keyPath: string[]) => {
	  console.log(key, keyPath)
	}
</script>

<style scoped>
	a {
	  text-decoration: none;
	  color: inherit; 
	}
</style>
